<template>
  <el-drawer
    title="我是标题"
    class="drawer"
    :visible.sync="drawer"
    :before-close="handleClose"
    size="50%"
  >
    <div class="container">
      <div class="overflowX">
        <el-tabs v-model="activeName">
          <el-tab-pane label="信件内容" name="first">
            <el-form ref="form" :model="formData">
              <el-row type="flex" :gutter="2" justify="start">
                <el-col :span="11" style="padding-right: 40px">
                  <el-form-item label="所属小区">
                    <el-select
                      v-model="formData.community_code"
                      placeholder=""
                      :style="{ width: '100%' }"
                      size="small"
                      disabled
                    >
                      <el-option
                        v-for="item in list"
                        :key="item.id"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="信件标题">
                    <el-input
                      v-model="formData.title"
                      disabled
                      :style="{ width: '100%' }"
                      size="small"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="20">
                  <h4>信件内容</h4>
                  <div class="textWrap" v-html="formData.reply" />
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="回复信件" name="second">
            <el-row :gutter="10">
              <el-col :span="24">
                <div>状态</div>
                <div style="padding: 20px">
                  <el-radio v-model="formData.status" :label="0">未读</el-radio>
                  <el-radio
                    v-model="formData.status"
                    :label="1"
                  >已读回复</el-radio>
                </div>
              </el-col>
            </el-row>
            <WangEditor :content="formData.content" @changeData="changeData" />
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-row type="flex" justify="end" class="btn">
        <el-button size="small" @click="handleClose">取消</el-button>
        <el-button
          type="primary"
          size="small"
          @click="postComponents"
        >确定</el-button>
      </el-row>
    </div>
  </el-drawer>
</template>

<script>
import { PUTMailbox } from '@/api/service/mailbox'
export default {
  name: 'ShequAddFrom',

  data() {
    return {
      // 单选按钮
      radio: '1',
      // 抽屉开关
      drawer: false,
      activeName: 'first',
      list: [],
      formData: {
        community_code: '',
        content: '',
        create_time: 0,
        id: 3,
        member_id: 5,
        reply: '',
        status: 0,
        title: '',
        update_time: 0
      }
    }
  },

  mounted() {},

  methods: {
    // 关闭
    handleClose() {
      this.formData = {
        community_code: '',
        content: '',
        create_time: 0,
        id: 3,
        member_id: 5,
        reply: '',
        status: 0,
        title: '',
        update_time: 0
      }
      this.drawer = false
    },
    // 获取富文本数据
    changeData(html) {
      // console.log(html)
      this.formData.content = html
    },
    // 提交·
    async postComponents() {
      await PUTMailbox(this.formData)
      this.$message.success('修改成功')
      this.handleClose()
      this.$parent.getMailbox()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.drawer {
  .el-drawer__header {
    padding-bottom: 10px;
    font-size: 25px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 0;
  }
  // .el-drawer__body {
  //   padding-bottom: 150px;
  // }
  .ant-drawer-body {
    flex: 1 1;
    min-width: 0;
    min-height: 0;
    padding: 24px ;
    padding-bottom: 0;
    overflow: auto;
  }
}
.btn {
    flex-shrink: 0;
    padding: 10px 16px;
    border-top: 1px solid rgba(0,0,0,.06);
}
.container {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  height: 100%;
  .overflowX {
    flex: 1 1;
    min-width: 0;
    min-height: 0;
    padding: 24px;
    overflow: auto;
  }
  ::v-deep .textWrap {
    width: 100%;
  }
}
</style>
